<template>

    <div class="box-content">
        <div class=" header">
            {{ scroe }}
        </div>
    </div>


</template>

<script setup>
import { } from "vue"
const props = defineProps(["scroe"])
</script>

<style scoped>
.box-content {
    width: 50%;
    height: 11.5%;
    max-width: 50%;
    background-color: white;
    border-radius: 5rem 5rem 5rem 5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    box-shadow: 0 1.5px 2px 0px rgba(15, 137, 62, 1);
}

.header {
    width: 97%;
    height: 95%;
    background-color: #1fcd63;
    text-align: center;
    border-radius: 5rem 5rem 5rem 5rem;
    color: aliceblue;
    font-size: 1.8vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header:hover {
    background-color: #0f893e;
}

@media (max-width:1300px) {
    .header {
        line-height: 65px;
        font-size: 30px;
    }
}

@media (max-height:700px) {
    .header {
        line-height: 65px;
        font-size: 30px;
    }

}
</style>